<template>
    <el-col :span="24" style="padding-left:100px">
    <el-button @click="addProduct" type="text">添加成分数据</el-button>
    <el-table
        :data="value"
        size="small"
        stripe
        style="width: 100%">
        <el-table-column prop="name" label="成分名字" width="120" fixed>
        </el-table-column>
        <el-table-column prop="count" label="数量" width="120">
            <template v-slot="{ row }">
                <el-input size="mini" type="number" placeholder="输入数量" v-model="row.count"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="100">
        </el-table-column>
        <el-table-column prop="supplier_name" label="厂商" width="100">
            <template v-slot="{ row }">
                <el-input size="mini" placeholder="输入厂商" v-model="row.supplier_name"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="80">
        </el-table-column>
        <el-table-column prop="place" label="产地" show-overflow-tooltip width="130">
        </el-table-column>
        <el-table-column prop="brand" label="品牌" width="120">
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
            <template v-slot="{ row }">
                <el-button @click="deleteEvt(row.detail_id)" type="text"  size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <ProductPicker v-model="show" @pickDataEvt="pickDataEvt" />
    </el-col>
</template>
<script>
import ProductPicker from './productPicker.vue'
export default {
    components:{
        ProductPicker
    },
    props:{
        value:{
            type:Array,
            required:true
        }
    },
    data() {
        return {
            show:false
        }
    },
    methods:{
        deleteEvt(id){
            this.$emit('input',this.value.filter(it=>it.detail_id!==id))
        },
        pickDataEvt(rows){
            // console.log(rows)
            // console.log(myRows)
            this.$emit('input',rows.map(it=>({
                 "detail_id": it.id,
                "name": it.name,
                "count": 0,
                "price": it.price,
                "supplier_name": '',
                "type": it.type,
                "unit": it.unit,
                "level": it.level,
                "place": it.place,
                "brand": it.brand,
                "remark": it.remark
            })))
        },
        addProduct(){
            // console.log('------')
            this.show = true
        }
    }
}
</script>